<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>整体Y轴3D旋转动画</title>
<style>
  .container {
    perspective: 800px; /* 提供 3D 空间透视效果 */
    perspective-origin: 50% 50%; /* 透视中心（视点） */
  }

  .rotate-container {
    width: 100%; /* 你还可以根据实际情况来设置宽度和高度 */
    height: 300px;
    position: relative;
    transform-style: preserve-3d; /* 允许子元素在 3D 空间中存在 */
    animation: rotate 10s linear infinite; /* 应用动画 */
    margin: 0 auto;
  }

  .box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px; /* 向上偏移半个高度，使中心对齐 */
    margin-left: -50px; /* 向左偏移半个宽度，使中心对齐 */
    background-color: #3498db;
  }

  /* 第一个盒子不需要平移，剩下的需要根据其位置进行平移 */
  .box:nth-child(1) {
    background-color: red;
    transform: translateZ(-100px); /* 向 z 轴负方向移动 */
  }
  .box:nth-child(2) {
    background-color: green;
    transform: rotateY(120deg) translateZ(-100px); /* 围绕 y 轴旋转并向 z 轴负方向移动 */
  }
  .box:nth-child(3) {
    background-color: blue;
    transform: rotateY(240deg) translateZ(-100px); /* 围绕 y 轴旋转并向 z 轴负方向移动 */
  }

  /* 定义旋转动画 */
  @keyframes rotate {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(360deg);
    }
  }
</style>
</head>
<body>

<div class="container">
  <div class="rotate-container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</div>

</body>
</html>